<div class="main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="header">
                        <h4 class="title"><i class="pe-7s-home"></i>Income Porducts List</h4>
                        <p class="category">Here is a subtitle for this table</p>
                    </div>
                    <div class="content table-responsive table-full-width">
                        <table class="table table-hover table-striped">
                            <thead>
                                <tr>
                                    <th *ngFor="let cell of productsTableData.headerRow">{{ cell }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let generalProduct of products">
                                    <th scope="row">11</th>
                                    <td>{{generalProduct.productId}}</td>
                                    <td>{{generalProduct.productCode}}</td>
                                    <td>{{generalProduct.porductName}}</td>
                                    <td>{{generalProduct.startDate | date:format | uppercase}}</td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card">
                    <div class="header">
                        <h4 class="title"><i class="pe-7s-cloud-download"></i>Striped Table with Hover</h4>
                        <p class="category">Here is a subtitle for this table</p>
                    </div>
                    <div class="content table-responsive table-full-width">
                        <table class="table table-hover table-striped">
                            <thead>
                                <tr>
                                    <th *ngFor="let cell of tableData1.headerRow">{{ cell }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let row of tableData1.dataRows">
                                    <td *ngFor="let cell of row">{{cell}}</td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card card-plain">
                    <div class="header">
                        <h4 class="title"><i class="pe-7s-music"></i>Table on Plain Background</h4>
                        <p class="category">Here is a subtitle for this table</p>
                    </div>
                    <div class="content table-responsive table-full-width">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let row of tableData2.dataRows">
                                    <td *ngFor="let cell of row">{{cell}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>